<script setup>
import { ref, reactive } from "vue";
import { getList } from "@/api/index.js";
import { getBrList } from "@/api/banner";
import { getnsList } from "@/api/news";
import { getncList } from "@/api/newsContent";
import more from "../components/more.vue";
import $ from "jquery";

const list = reactive([
  { id: 1, url: "/src/assets/素材/8.jpg", text: "迎新晚会现代舞" },
  { id: 2, url: "/src/assets/素材/9.jpg", text: "运动会" },
  { id: 3, url: "/src/assets/素材/10.jpg", text: "运动会全景1" },
  { id: 4, url: "/src/assets/素材/12.jpg", text: "才艺展示" },
]);
// 导航列表
const navList = ref();
// banner列表
const bannerList = ref();
// 新闻列表
const newsList = ref();
// 新闻详情
const newscontent = ref();
// 获取导航菜单列表
const getnavList = async () => {
  const {
    data: { data },
  } = await getList();
  console.log(data);
  navList.value = data;
};
// 获取banner图列表
const getbannerList = async () => {
  const {
    data: { data },
  } = await getBrList();
  // console.log(data);
  bannerList.value = data;
  // console.log(bannerList);
};
// 获取新闻列表
// function getnewsList() { // 异步调用
//   getnsList().then((res) => {
//     console.log(res.data.data.list);
//     newsList.value = res.data.data.list;
//   });
// }
const getnewsList = async () => {
  try{
    const {
    data: {
      data: { list },
    },
  } = await getnsList();
  // console.log();
  // index.value = index1 + 1;
  newsList.value = list;
  }
  // 同步调用
  catch {
    alert(123)
  }
  $(function () {
    $(".news1:first").show().siblings(".news1").hide();
    var index = 0;
    $(".img-right").click(() => {
      index++;
      console.log(index);
      if (index < 3) {
        $(".news1").eq(index).show().siblings(".news1").hide();
      } else {
        index = -1;
      }
    });
    $(".img-left").click(() => {
      index--;
      if (index >= 0) {
        $(".news1").eq(index).show().siblings(".news1").hide();
      } else {
        index = 3;
      }
    });
    $(".none2").click(function () {
      var bElement = $(".uls");
      if (bElement.is(":visible")) {
        bElement.hide();
      } else {
        bElement.show();
      }
    });
  });
};
// 获取新闻详情列表
const getncontentList = async () => {
  const {
    data: {
      data: { content },
    },
  } = await getncList();
  console.log(content);
  newscontent.value = content;
};
// 调用
getnavList(); // 导航菜单
getbannerList(); // banner图
getnewsList(); // 新闻列表
getncontentList(); // 新闻详情
</script>
<template>
  <div id="index">
    <!-- 导航栏开始 -->
    <div class="nav">
      <div class="nav-box">
        <div class="nav-content">
          <div class="none"><img src="../assets/素材/4.png" alt="" /></div>
          <div class="none1"><img src="../assets/素材/6.png" alt="" /></div>
        </div>
        <div class="none2"><img src="../assets/素材/更多1.png" alt="" /></div>
        <div class="uls">
          <ul>
            <li><a href="#">首页</a></li>
            <li>
              <router-link to="/staff">院部简介</router-link>
            </li>
            <li>
              <router-link to="/demo">办学特色</router-link>
            </li>
            <li><a href="#">专业介绍</a></li>
            <li><a href="#">领导关怀</a></li>
            <li><a href="#">对外交流</a></li>
            <li><a href="#">社会服务</a></li>
            <li><a href="#">师资力量</a></li>
            <li v-for="item in navList" :key="item.id">
              <router-link to="/staff">
                {{ item.title }}
                <ul class="ulnone">
                  <li v-for="item1 in item.child" :key="item1">
                    {{ item1.title }}
                  </li>
                </ul>
              </router-link>
            </li>
            <!-- <li><a href="#">实习基地</a></li> -->
          </ul>
        </div>
      </div>
    </div>
    <!-- 导航栏结束 -->
    <!-- banner图开始 -->
    <div class="banner">
      <t-swiper
        class="tdesign-demo-block--swiper"
        :duration="300"
        :autoplay="true"
        :interval="2000"
      >
        <t-swiper-item
          v-for="item in bannerList"
          :key="item.id"
          class="t-swiper-item"
        >
          <div class="demo-item">
            <img :src="item.image" alt="" />
          </div>
        </t-swiper-item>
      </t-swiper>
    </div>
    <!-- banner图结束 -->
    <!-- 院部新闻开始 -->
    <div class="news">
      <more title1="院部新闻"></more>
      <div class="news-content">
        <div class="news1" v-for="(item, index) in newsList" :key="item.id">
          <div class="news-left">
            <img class="image3" :src="item.image" alt="" />
            <div class="none1">{{ item.title }}</div>
          </div>
          <div class="news-right">
            <div class="top top-none">
              {{ item.title }}
            </div>
            <div class="top top-none1">
              传承八一精神 凝聚奋进力量|旅游与服务系第一第二当支部开展主题...
            </div>
            <div class="center">
              <div class="border"></div>
              <div class="time">{{ item.create_time }}</div>
            </div>
            <div class="bottom bottom-none">
              {{ item.abstract }}
            </div>
            <div class="bottom bottom-none1">
              传承八一精神
              凝聚奋进力量|旅游与服务系第一第二当支部开展主题，传承八一精神...
            </div>
            <div class="bottom-img">
              <div class="bottom-left">
                <img src="../assets/素材/更多.png" alt="" class="img-left" />
                <img src="../assets/素材/更多.png" alt="" class="img-right" />
              </div>
              <div class="bottom-right">
                <span>{{ index + 1 }}</span
                >/{{ newsList.length }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="news-bottom">
        <div class="bottom-content" v-for="item in 3" :key="item">
          <div class="content-top">
            传承八一精神 凝聚奋进力量 | 旅游与服务系第一第二当支部开展主题...
          </div>
          <div class="content-bottom">
            <img src="../assets/素材/表.png" alt="" />
            2022-11-02
          </div>
        </div>
      </div>
    </div>
    <!-- 院部新闻结束 -->
    <!-- 当糰建设开始 -->
    <div class="build">
      <div class="build-content">
        <div class="more-none"><more title1="当糰建设"></more></div>
        <div class="build-left">
          <div class="left-content" v-for="item in 4" :key="item">
            <div class="content-left">
              <div class="left-top">28</div>
              <div class="left-bottom">2019-01</div>
            </div>
            <div class="content-right">
              中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...
            </div>
          </div>
        </div>
        <div class="build-center">
          <img src="../assets/素材/12.png" alt="" />
        </div>
        <div class="build-left build-none">
          <div class="left-content" v-for="item in 4" :key="item">
            <div class="content-right">
              中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...
            </div>
            <div class="content-left">
              <div class="left-top">28</div>
              <div class="left-bottom">2019-01</div>
            </div>
          </div>
        </div>
        <div class="build-left build-none1">
          <more title1="校企合作"></more>
          <div class="left-content" v-for="item in 4" :key="item">
            <div class="content-left">
              <div class="left-top">28</div>
              <div class="left-bottom">2019-01</div>
            </div>
            <div class="content-right">
              中餐学院2022级新生军训圆满闭营，中餐学院2022级新生军训...
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 当糰建设结束 -->
    <!-- 技能大赛开始 -->
    <div class="jineng">
      <more title1="技能大赛"></more>
      <div class="jineng-box">
        <div class="for" v-for="item in 3" :key="item">
          <div class="img">
            <img src="../assets/素材/18.png" alt="" />
          </div>
          <div class="font">
            <div class="font-top">2021-09-10</div>
            <div class="font-center">我院参加全省技工院校学生资助管理工...</div>
            <div class="font-bottom">→</div>
          </div>
        </div>
      </div>
      <div class="jineng-content">
        <t-swiper
          class="tdesign-demo-block--swiper"
          :autoplay="true"
          type="card"
          :height="280"
        >
          <t-swiper-item class="t-swiper-item" v-for="item in 6" :key="item">
            <div class="demo-item">
              <img src="../assets/素材/10.png" alt="" />
            </div>
          </t-swiper-item>
        </t-swiper>
      </div>
    </div>
    <!-- 技能大赛结束 -->
    <!-- 教研动态开始 -->
    <div class="jiaoyan">
      <img class="background" src="../assets/素材/4.jpg" alt="" />
      <div class="jiaoyan-box">
        <div class="jiaoyan-content">
          JIAOYANCHENGGUO
          <div class="jiaoyancolor">教研成果</div>
        </div>
        <div class="jiaoyan-box1">
          <div class="content">
            <div class="box1">
              <div class="top">
                <div><img src="../assets/素材/12-min.png" alt="" /></div>
                <div class="font">山东城院“五心工程”<br />温暖校园</div>
              </div>
              <div class="bottom">
                3月24日，一场别开生面的“平台通过网络直播的形式拉开序幕...
              </div>
            </div>
            <div class="box1" v-for="item in 3" :key="item">
              <div class="top">
                <div><img src="../assets/素材/13-min.png" alt="" /></div>
                <div class="font">
                  划重点！一图读懂山东<br />城院“十四五”发<br />展规划
                </div>
              </div>
              <div class="bottom">
                3月20日，烟台市高新区管委副主任李如鹏、市教育局高新区分局...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教研动态结束 -->
    <!-- 学生动态开始 -->
    <div class="xuesheng">
      <more title1="学生动态"></more>
      <div class="xuesheng-box">
        <div class="xuesheng-left">
          <div class="img"><img src="../assets/素材/11.jpg" alt="" /></div>
          <div class="font">
            <div class="font-top">迎新晚会·独唱</div>
            <div class="btn">更多+</div>
          </div>
        </div>
        <div class="xuesheng-right">
          <div class="for" v-for="item in list" :key="item.id">
            <div class="img"><img :src="item.url" alt="" /></div>
            <div class="font">
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
      <div class="lianjie">
        <div class="lianjie-left">友情链接</div>
        <div>中华人民共和国教育部</div>
        <div>山东教育厅</div>
        <div>山东省科学技术厅</div>
        <div>中国高职专教育网</div>
        <div>山东省科学技术厅</div>
        <div>中国高职专教育网</div>
      </div>
    </div>
    <!-- 学生动态结束 -->
    <!-- 尾部开始 -->
    <div class="foot">
      <img class="img" src="../assets/素材/6.jpg" alt="" />
      <div class="foot-box">
        <div class="foot-content">
          <div class="none"><img src="../assets/素材/4.png" alt="" /></div>
          <div class="none1"><img src="../assets/素材/6.png" alt="" /></div>
        </div>
        <div class="foot-top">
          <div class="foot-left">
            <div class="left1">联系我们</div>
            <div class="left2">办公室：0535-2246666</div>
            <div class="left2">招生咨询：0535-2246625</div>
            <div class="left2">官网：www.sdcc.edu.cn</div>
            <div class="left2">邮箱：sdccxy@126.com</div>
            <div class="left2">校址：山东省烟台市高新区海天路1001号</div>
          </div>
          <div class="foot-center">
            <img src="../assets/素材/4.png" alt="" />
          </div>
          <div class="foot-right foot-none1">
            <img src="../assets/素材/14.png" alt="" />
          </div>
          <div class="foot-right foot-none">
            <img src="../assets/素材/微信.png" alt="" />
            <img src="../assets/素材/微博.png" alt="" />
          </div>
        </div>
        <div class="foot-bottom">Copyright ©山东省城市服务技师学院版权所有</div>
      </div>
    </div>
    <!-- 尾部结束 -->
  </div>
</template>
<style lang="scss">
@import "../assets/index.scss";
@import "../assets/index1.scss";
</style>